<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
    <title>Title</title>

    <link rel="stylesheet" href="./static/layui/css/layui.css" media="all"/>
    <script type="text/javascript" src="./static/layui/layui.js"></script>
    <script type="text/javascript" src="./static/js/lay-module/echarts/echarts.js"></script>

    <style>
        .layui-table-cell{

            height:52px;

            line-height: 52px;

        }

    </style>
</head>
<body>

<div class="layui-inline">
    <label class="layui-form-label">姓名：</label>
    <div class="layui-input-inline">
        <input type="text" name="empName" id="empName" autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="selectName">查询</button>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-add-circle-fine" id="addStuBtn"
            lay-event="add">增加员工数据
    </button>
    <button type="button" class="layui-btn layui-btn-danger  layui-icon layui-icon-delete" id="deleteStuBtn"
            lay-event="delete">批量 删除
    </button>

</div>
<!-- 表格行内toolbar -->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>

    <a class="layui-btn layui-btn-xs  layui-icon layui-icon-edit"
       lay-event="edit">编辑</a>

    <a class="layui-btn layui-btn-danger  layui-btn-xs layui-icon layui-icon-delete"
        lay-event="del">删除</a>
</div>

<table class="layui-hide" id="demo" lay-filter="demo"></table>


<!-- 弹出层div(新增和修改) -->
<div id="mydiv" style="display: none">
    <form class="layui-form" lay-filter="dataform" id="dataform" method="post">

        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="hidden" name="empId" class="layui-input">
                </div>
            </div>
     </div>


            <div class="layui-form-item">
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-block">

                    <input type="text" name="empName" placeholder="请输入真实姓名" lay-verify="required|empName"
                           autocomplete="off" class="layui-input">
                </div>
            </div>


        <div class="layui-form-item">
            <label class="layui-form-label">员工性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号码:</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" placeholder="请输入11位手机号码" class="layui-input demo-phone">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label ">入职时间</label>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" id="date2" name="startDate" class="layui-input"
                               placeholder="入职时间">
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">选择部门</label>
            <div class="layui-input-inline">
                <select name="depId" id="sList" lay-verify="required" lay-filter="xmFilter">
                    <option value="">请选择</option>
                </select>
            </div>
        </div><br><br>



        <div class="layui-inline">
            <label class="layui-form-label">选择职位</label>
            <div class="layui-input-inline">
                <select name="positionId" id="pList" lay-verify="required" lay-filter="xmFilter">
                    <option value="">请选择</option>
                </select>
            </div>
        </div><br><br>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">员工地址</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入详细地址" class="layui-textarea" name="address" lay-verify="address"></textarea>
            </div>
        </div>





        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark"></textarea>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">银行账号</label>
            <div class="layui-input-block">
                <input type="text" name="bankNum" lay-verify="required|number|bankNum" lay-verify="bankNum" autocomplete="off" placeholder="请输入账号" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"> 请输入12位银行卡号</div>
        </div>





        <div class="layui-form-item">
            <label class="layui-form-label">工资:</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="salary" lay-verify="required|number" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit=""
                        lay-filter="dosubmit">立即提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
  
<!-- 弹出层div(查看考勤) -->
<div id="myd" style="display: none">
    <form class="layui-form" lay-filter="dataform" id="dataform1" method="post">

                <div id="main" style="width: 600px;height: 500px;"> </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit=""
                        lay-filter="dosubmit">关闭
                </button>

            </div>
        </div>
    </form>
        </div>


</body>
<script type="text/javascript">
    layui.use(["element", "jquery", "layer", "form", "table"], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var url;
        var tanIndex;
        var myChart = echarts.init($('#main')[0]);



        //展示已知数据
        var mytable = table.render({
            elem: '#demo', //table的id
            url: 'findEmployeeListjson'
            , cols: [[
                {
                    type: 'checkbox',
                    fixed: 'left'  //启动复选框
                },
                {field: 'empId', title: '员工Id',sort: true}
                , {field: 'empName', title: '员工姓名'}
                , {field: 'sex', title: '员工性别'}
                , {field: 'phone', title: '员工手机号码'}
                , {field: 'startDate', title: '入职时间'}
                , {field: 'address', title: '地址'}
                , {field: 'depName', title: '所属部门'}
                , {field: 'positionName', title: '职位名称'}
                , {field: 'remark', title: '备注'}
                , {field: 'bankNum', title: '银行卡号'}
                , {field: 'salary', title: '工资'}
                , {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 250,
                    align: 'center'
                }
            ]]

            , even: true   //开启间隔行的背景颜色
            , page: true //是否显示分页
            , limits: [3, 5, 7, 10]
            , limit: 7 //每页默认显示的数量
        });

        $("#selectName").click(function () {
            mytable.reload({
                page: {
                    curr: 1 //重新从第 1 页开始
                    , limit: 5
                }
                , method: 'POST'
                , url: 'findEmployeeListjson'
                , where: {
                    empName: $("#empName").val() //参数 多个值,逗号隔开
                }
            });
        });

//自定义验证规则

        form.verify({

             empName: function (value) {

                 if(!new RegExp("^[\u4e00-\u9fa5\]+$").test(value)){
                     return '姓名只能是中文';
                 };
                 if (value.length < 2) {

                     return '内容请输入至少2个字符';

                 }

            }, address: function (value) {

                if (value.length < 4) {

                    return '内容请输入至少4个字符';

                }

            },bankNum: function (value){
                 if(value.length < 12){
                     return '银行卡号长度不得少于12位'
                 }
            }


            , phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！'],

        });
     //监听提交

        form.on('submit(dosubmit)', function(data){


            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value};获取单个值data.field["title"]

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });






        //查看员工考勤柱状图
        var options = {
            title: {
                text: '员工考勤',
                show: true, // 是否显示标题
                left:'center',
                subtext: 'X轴为考勤状态，Y轴为考勤时间',
                textStyle: {
                    fontSize: 28 // 标题文字大小
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            legend: {
                data: ['次/小时'],
                left:'left',
            },
            // X轴
            xAxis: {
                data: ['上班','迟到','早退','请假','休息','加班','下班'] // 异步请求时,这里要置空
            },
            // Y轴
            yAxis: {},
            series: [{
                name: '次/小时',
                type: 'bar', // 设置图表类型为柱状图
                data: [] // 设置纵坐标的刻度(异步请求时,这里要置空)
            }]
        };
        // 给图标设置配置的参数
        myChart.setOption(options);
        myChart.showLoading(); // 显示加载动画
        function openList(row) {
            tanIndex = layer.open({
                type: 1,  //设置类型 默认为0 1 页面层 2 iframe层
                title: '查看员工考勤',  //标题
                data: 'empId=' + row.empId,
                content: $("#myd"), //内容  type=0 的内容
                skin: 'layui-layer-molv',//skin - 样式类名
                area: ['600px'],  //area - 宽高
                offset: [50, 400],//offset - 坐标 默认：垂直水平居中
                btnAlign: 'c',//按钮排列
                closeBtn: 2,  //设置关闭按钮的样式 默认是1  0是没有 2
                anim: 4,//设置动画
                maxmin: true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                success: function (index) {
                    url = "queryForList";
                    //给表单赋值
                    form.val('dataform', row);
                    $.ajax({
                        url: url,
                        dataType: 'json',
                        data: 'empId=' + row.empId,
                        type: 'get',
                        success: function (data) {
                         console.log(data)
                            var nums = [];

                                    $.each(data, function(index, obj) {
                                        nums.push(obj.work);+
                                        nums.push(obj.late);
                                        nums.push(obj.early);
                                        nums.push(obj.vacate);
                                        nums.push(obj.vacateion);
                                        nums.push(obj.overtime);
                                        nums.push(obj.off_duty);
                                    })

                                    myChart.hideLoading(); // 隐藏加载动画
                                    myChart.setOption({
                                        legend: {
                                            data: ['次/小时'],
                                        },
                                        xAxis: {
                                            data: ['上班','迟到','早退','请假','休息','加班','下班']
                                        },
                                        series: [{
                                            name: '次/小时',
                                            type: 'bar', // 设置图表类型为柱状图
                                            data: nums, // 设置纵坐标的刻度

                                            color:'#e69d87',
                                        }]
                                    });
                                }
                            });

                        }
                    });


                }









        //新增员工
        $("#addStuBtn").click(function () {
            tanIndex = layer.open({
                type: 1,  //设置类型 默认为0 1 页面层 2 iframe层
                title: '新增员工信息',  //标题
                content: $("#mydiv"), //内容  type=0 的内容
                skin: 'layui-layer-molv',//skin - 样式类名
                area: ['500px','500px'],  //area - 宽高
                offset: [50, 400],//offset - 坐标 默认：垂直水平居中
                btnAlign: 'c',//按钮排列
                closeBtn: 1,  //设置关闭按钮的样式 默认是1  0是没有 2
                anim: 4,//设置动画
                maxmin: true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                success: function (index) {
                    url = "addEmployee";
                    //清空表单数据
                    $("#dataform")[0].reset();
                }
            });
        });


        //新增form表单
        form.on("submit(dosubmit)", function (obj) {
            //序列化表单数据
            var params = $("#dataform").serialize();
            $.post(url, params, function (data) {
                //刷新数据表格
                mytable.reload();
                //关闭弹出层
                layer.close(tanIndex);
            });
        });

        //下拉列表部门
        $.ajax({
            url: 'depList',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                console.log(data)
                //使用循环遍历，给下拉列表赋值
                $.each(data.data, function (index, value) {
                    $("#sList").append(new Option(value.depName, value.depId))//对应映射字段名 第一个为显示的值  第二个为value值
                });
                layui.form.render("select")//重新渲染 固定写法
            }
        });

        //下拉列表职位
        $.ajax({
            url: 'positionList',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                console.log(data)
                //使用循环遍历，给下拉列表赋值
                $.each(data.data, function (index, value) {
                    $("#pList").append(new Option(value.positionName, value.positionId))//对应映射字段名 第一个为显示的值  第二个为value值
                });
                layui.form.render("select")//重新渲染 固定写法
            }
        });


        //删除  
        $("#deleteStuBtn").click(function () {
            var checkStatus = table.checkStatus('demo'); //即为基础参数 id 对应的值
            console.log(checkStatus.data) //获取选中行的数据
            console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll) //表格是否全选
            var empId = ""; //用于拼接id
            if (checkStatus.data.length > 0) {
                for (var i = 0; i < checkStatus.data.length; i++) {
                    if (i == 0) {
                        empId = checkStatus.data[i].empId;
                    } else {
                        empId = checkStatus.data[i].empId + "," + empId;
                    }
                }
                $.ajax({
                    type: "get",
                    url: '${pageContext.request.contextPath}/deleteEmployee',
                    data: 'empId=' + empId,
                    success: function (data) {
                        //刷新数据表格
                        mytable.reload();
                        //关闭弹出层
                        layer.close(tanIndex);
                        layer.msg("删除成功", {
                            icon: 6,
                            time: 1000
                        });
                    }
                });
            } else {
                layer.msg("没有选择数据", {
                    icon: 2,
                    time: 1000
                });
            }
        });

        //每行按钮监听
        table.on('tool(demo)', function (obj) {
            console.log(JSON.stringify(obj,null,2) + "======")
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是  表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent == 'edit') {
                //修改操作
                openUpdate(data);
            } else if (layEvent == 'del') {
                //删除操作
                layer.confirm('真的删除行?', function (index) {
                    $.get("deleteEmployee", "empId=" + data.empId, function (back) {
                        //刷新数据表格
                        mytable.reload();
                    });
                    layer.close(index);
                });
            } else if(layEvent == 'detail'){
                //查看员工考勤
              openList(data);
            }
        });

     //修改员工信息
        function openUpdate(row) {
            tanIndex = layer.open({
                type: 1,  //设置类型 默认为0 1 页面层 2 iframe层
                title: '修改员工信息',  //标题
                content: $("#mydiv"), //内容  type=0 的内容
                skin: 'layui-layer-molv',//skin - 样式类名
                area: ['500px','500px'],  //area - 宽高
                offset: [50, 400],//offset - 坐标 默认：垂直水平居中
                btnAlign: 'c',//按钮排列
                closeBtn: 2,  //设置关闭按钮的样式 默认是1  0是没有 2
                anim: 4,//设置动画
                maxmin: true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                success: function (index) {
                    url = "updateEmployee";
                    //给表单赋值
                    form.val('dataform', row);

                }
            });
        }


        //日期上传
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var laydate2 = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#date1',//指定元素
            });
            laydate2.render({
                elem: '#date2' //指定元素
            });
        });



    });
</script>
</html>
